@import compass/utilities.sass
@import compass/css3.sass
@import compass/reset.sass

body
  text-align: center
  font-family: sans-serif

h1
  margin: 2em 0
  font-size: 2em
  font-weight: bold
  color: #777777
  text-align: center

a
  text-decoration: none

p
  text-align: left
  line-height: 1.5em
  margin: 4em auto
  width: 60%
  color: #999
  span
    display: block
    margin-top: 1em
    color: #333

#container
  margin: 1em auto

#picker
  display: inline-block
  margin-bottom: 2em
  input
    border: 2px solid #aaa
    padding: 3px 5px
    font-size: 1.5em
    width: 400px
    text-align: center

.digits
  position: relative
  margin: auto
  
.s0, .s1, .m0, .m1, .h0, .h1, .d0, .d1, .d2
  //position: absolute
  font-size: 10em
  display: inline-block
  width: 70px
  height: 100px

.s0, .s1
  background-color: #009E4C
.m0, .m1
  background-color: #E30003
.h0, .h1
  background-color: #00B0F9
.d0, .d1, .d2
  background-color: #005A96
  
.colon
  display: inline-block
  font-size: 6em
  color: #ccc
  height: 100px
  vertical-align: middle

.v0, .v1, .v2, .v3, .v4, .v5, .v6, .v7, .v8, .v9
  //+transition("background-position, opacity", 0.3s, false, false)
  +transition("background-position", 0.3s, false, false)
  vertical-align: middle
.v0
  +replace-text("digits.png", 0, 0)
  //opacity: 0.1
.v1
  +replace-text("digits.png", 0, -100px)
  //opacity: 0.2
.v2
  +replace-text("digits.png", 0, -200px)
  //opacity: 0.3
.v3
  +replace-text("digits.png", 0, -300px)
  //opacity: 0.4
.v4
  +replace-text("digits.png", 0, -400px)
  //opacity: 0.5
.v5
  +replace-text("digits.png", 0, -500px)
  //opacity: 0.6
.v6
  +replace-text("digits.png", 0, -600px)
  //opacity: 0.7
.v7
  +replace-text("digits.png", 0, -700px)
  //opacity: 0.8
.v8
  +replace-text("digits.png", 0, -800px)
  //opacity: 0.9
.v9
  +replace-text("digits.png", 0, -900px)
  //opacity: 1

//.s0
  &.v0, &.v1, &.v2, &.v3, &.v4, &.v5, &.v6, &.v7, &.v8, &.v9
    +transition-duration(1s)


